import Control from 'ol/control/Control';
import { Coordinate } from 'ol/coordinate';
import Feature from 'ol/Feature';
import Geometry from 'ol/geom/Geometry';
import Point from 'ol/geom/Point';
import VectorLayer from 'ol/layer/Vector';
import Map from 'ol/Map';
import 'ol/ol.css';
import Overlay, { Options } from 'ol/Overlay';
import OverlayPositioning from 'ol/OverlayPositioning';
// import View from 'ol/View';
// import TileLayer from 'ol/layer/Tile';
// import XYZ from 'ol/source/XYZ';
// import * as proj from "ol/proj";
import { MapOptions } from 'ol/PluggableMap';
import VectorSource from 'ol/source/Vector';
import { Icon, Style, } from 'ol/style';
import IconAnchorUnits from 'ol/style/IconAnchorUnits';
import { Options as StyleOptions } from 'ol/style/Style';
import { createControl } from './controls/MyControl';
// import { iserverIP } from '@/config/server';
// import { gaode } from '@/config/projection/gaode';
// import "../project/gaode.js";

export default class {
    public map: Map;
    constructor(options: MapOptions = { target: 'map' }) {
        this.map  = new Map(options);
    }

    public createPopup(options: Options = {
        element: undefined,
        positioning: OverlayPositioning.BOTTOM_CENTER,
        stopEvent: false,
        offset: [0, -50]
    }) {
        if (!options.element) {
            const el = document.createElement('div');
            el.id = 'popup';
            // document.body.append(el);
            options.element = el;
        }
        // var element = document.getElementById('popup')||undefined;

        return new Overlay(options);
    }
    /**
     * 添加图标层
     * @param features 
     * @param styleOptions 
     */
    public addIconLayer(features: Geometry | { [key: string]: any } | undefined, styleOptions: StyleOptions = {
        image: new Icon({
            anchor: [0.5, 46],
            anchorXUnits: IconAnchorUnits.FRACTION,
            anchorYUnits: IconAnchorUnits.PIXELS,
            src: 'assets/icons/icon.png'
        })
    }) {
        const iconFeature = new Feature(features);
        // var iconStyle = ;

        iconFeature.setStyle(new Style(styleOptions));

        const vectorLayer = new VectorLayer({
            source: new VectorSource({
                features: [iconFeature]
            })
        });
        vectorLayer.on('click', e => console.log(e));
        return vectorLayer;

    }
    // createControl() {
    //   return createControl()}
}
